<template>
  <div id="weeklyPlan">
    <div
      class="weeklyPlanTable"
      v-if="key == 1"
    >
      <weeklyPlanTable :getKey="getKey"></weeklyPlanTable>
    </div>
    <div v-if="key == 2">
      <weeklyPlanFrom
        :getKey="getKey"
        style="margin: 0 auto; width: 95%"
      ></weeklyPlanFrom>
    </div>
    <div v-if="key == 3">
      <weeklyPlanItem
        :getKey="getKey"
        :weekId="weekId"
        style="margin: 0 auto; width: 95%"
      ></weeklyPlanItem>
    </div>
  </div>
</template>

<script>
import weeklyPlanFrom from './from.vue'
import weeklyPlanTable from './table.vue'
import weeklyPlanItem from './weeklyPlanItem.vue'

export default {
  data() {
    return {
      key: 1,
      weekId: '',
    }
  },
  components: {
    weeklyPlanFrom,
    weeklyPlanTable,
    weeklyPlanItem,
  },
  created() {},
  methods: {
    getKey(key, id) {
      this.key = key
      this.weekId = id
    },
  },
}
</script>

<style lang="less" scoped>
#weeklyPlan {
  height: 100%;

  width: 100%;
  .weeklyPlanTable {
    width: 100%;
  }
}
.el-menu-vertical-weeklyPlan {
  width: 18rem;
  height: 61rem;
}
.constructionPlanContent {
  width: 100%;
  position: relative;
}
</style>
<style lang="less"></style>
